import { GenMain, TestItem } from '../../gen';
import React from 'react'
import { ClipPath, Defs, LinearGradient, Rect, Stop } from 'react-native-svg'
import { AreaChart, Path, Grid, Text } from 'react-native-svg-charts'

const cases = [
  { x: 1, y: 40, data: [50, 10, 40, 100], style: { width: 300, height: 200, backgroundColor: '#ccc' } },
  { x: 3, y: 95, data: [50, 20, 40, 95], style: { width: 200, height: 300, backgroundColor: 'yellow' } }
]

export default function () {
  return <GenMain
    cases={[]}
    basicProps={[]}
    comName='ChildrenTest'
  >
    {cases.map(item=>{
      return <TestItem desc={JSON.stringify(item)}>
      <PartialAreaChartExample {...item} />
    </TestItem>
    })}
  </GenMain >
}

const PartialAreaChartExample = (props) => {

    const Result = (resultProps) => {
      const { x, y } = resultProps
      return (
        <Text x={10} y={10}>
            X:{ props.x ? x(props.x) : 0 }
            {'\r'}
            Y:{ props.y ? y(props.y) : 0 }
        </Text>
      )
    }

    const Line = (lineProps) => {
      const { line } = lineProps
      return <Path
        key={'line'}
        d={line}
        stroke={'green'}
        fillOpacity={0.1}
        clipPath={'url(#clip-path-1)'}
      />
    }

    const GirdComp = (gridProps) => {
      const { line } = gridProps
      return <Grid
          {...gridProps}
      />
    }

    return (
      <AreaChart
        contentInset={{ top: 30, bottom: 30 }}
        {...props}
      >
        <Result />
        <Line />
        <GirdComp />
      </AreaChart>
    )
}


